<template>
  <div class="content">
    <div>
      <h2><span>原图</span></h2>
      <img id="img" src="../../assets/internet2.jpg" />
    </div>
    <div>
      <h2><span>效果图</span></h2>
      <canvas class="filter-cavans" id="filterCavans"></canvas>
    </div>
    <div class="margin-div">
      <van-button type="primary" @click="blackWhite()">黑白</van-button>
      <van-button type="primary" @click="gray()">灰色调</van-button>
      <van-button type="primary" @click="toggle()">反转</van-button>
      <van-button type="primary" @click="sepia()">复古</van-button>
      <van-button type="primary" @click="carve()">浮雕</van-button>
      <van-button type="primary" @click="myRed()">红色蒙版</van-button>
    </div>
    <div class="margin-div">
      <van-button type="primary" @click="brightness()">增加亮度</van-button>
      <van-button type="primary" @click="fog()">雾化</van-button>
      <van-button type="primary" @click="spread()">毛玻璃</van-button>
      <van-button type="primary" @click="mosaic()">马赛克</van-button>
      <van-button type="primary" @click="myBlur()">模糊</van-button>
    </div>

    <div class="margin-div">
      <van-button type="primary" @click="save()">保存</van-button>
    </div>
  </div>
</template>
<script>
let filterCavans = null;
let ctx = null;
let canvasData = null;
import filter from "./filter.js";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "测试",
    };
  },
  mounted() {
    window.onload = () => {
      this.drawImage();
    };
  },
  methods: {
    drawImage() {
      //获取图片节点
      let img = document.getElementById("img");
      //获取图层节点
      filterCavans = document.getElementById("filterCavans");
      //设置图层宽高
      filterCavans.width = img.clientWidth;
      filterCavans.height = img.clientHeight;
      //获取画笔
      ctx = filterCavans.getContext("2d");
      //画图
      ctx.drawImage(img, 0, 0, img.clientWidth, img.clientHeight);

      //获取图层上的图片区域
      canvasData = ctx.getImageData(
        0,
        0,
        filterCavans.width,
        filterCavans.height
      );
    },
    //黑白
    blackWhite() {
      filter.blackWhite(canvasData);
      this.putData();
    },
    //灰色调
    gray() {
      filter.gray(canvasData);
      this.putData();
    },
    //反转
    toggle() {
      filter.toggle(canvasData);
      this.putData();
    },
    //复古
    sepia() {
      filter.sepia(canvasData);
      this.putData();
    },
    //红色蒙版
    myRed() {
      filter.myRed(canvasData);
      this.putData();
    },
    //增加亮度
    brightness() {
      filter.brightness(canvasData, 10);
      this.putData();
    },
    //浮雕
    carve() {
      filter.carve(canvasData);
      this.putData();
    },
    //雾化
    fog() {
      filter.fog(canvasData);
      this.putData();
    },
    //冒玻璃
    spread() {
      filter.spread(canvasData);
      this.putData();
    },
    //马赛克
    mosaic() {
      filter.mosaic(canvasData, 5);
      this.putData();
    },
    //模糊
    myBlur() {
      filter.myBlur(canvasData);
      this.putData();
    },
    //重新绘制图片
    putData() {
      //清楚画布
      ctx.clearRect(0, 0, filterCavans.width, filterCavans.height);

      //换算完之后就重新设置到图层中
      ctx.putImageData(canvasData, 0, 0);
    },
    //保存图片
    save() {
      this.download("png");
    },
    //利用a标签下载
    download(type) {
      //设置保存图片的类型
      let imgdata = filterCavans.toDataURL(type);
      //将mime-type改为image/octet-stream,强制让浏览器下载
      let fixtype = function (type) {
        type = type.toLocaleLowerCase().replace(/jpg/i, "jpeg");
        let r = type.match(/png|jpeg|bmp|gif/)[0];
        return "image/" + r;
      };
      imgdata = imgdata.replace(fixtype(type), "image/octet-stream");
      //将图片保存到本地
      let saveFile = function (data, filename) {
        let link = document.createElement("a");
        link.href = data;
        link.download = filename;
        link.click();
      };
      let filename = new Date().toLocaleDateString() + "." + type;
      saveFile(imgdata, filename);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.content {
  display: inline-flex;
  flex-direction: column;
}
.filter-cavans {
  background-color: antiquewhite;
}
.margin-div {
  margin-top: 20px;
}
</style>>

